
// 类组件  :rcc

// react  版本16.8之前只能接受props  不能定义状态

import React, { Component, createRef } from 'react'


export default class App extends Component {

    state = {
        name:'小明'
    }

    inputRef = createRef()

    // 类组件必须定义render函数  返回虚拟dom  进入组件自动执行render函数
  render() {
    console.log('执行render函数了')
    // return (
    //   <div>
    //     <h1>受控组件</h1>
    //     <p>{this.state.name}</p>

    //     <input type="text" value={this.state.name} onChange={e => {
    //         console.log(e.target.value)
    //         this.setState({
    //             name:e.target.value
    //         })
    //     }}/>
    //   </div>


    // )
    return (
        <div>
          <h1>非受控组件</h1>
          <p>{this.state.name}</p>
        {/* 表单里的value与state无关  通过defaultValue设置默认值  通过ref获取dom元素 */}
          <input type="text" defaultValue={this.state.name} ref={this.inputRef}/>
          <button onClick={() => {
            console.log(this.inputRef.current)
          }
          }>获取dom元素</button>

        </div>
  
  
      )
  }
}

// 函数组件  :rafce
// import React from 'react'

// const App = () => {
//   return (
//     <div>App</div>
//   )
// }

// export default App

